<template>
  <div>
    <!-- <a-button
      v-if="netBthPermission"
      icon="plus-circle"
      style="position: absolute;top: 55px;left: 24px;"
      @click="addConsultation"
      type="primary">
      新增电网咨询
    </a-button> -->
    <!-- :rowClassName="setRowClassName" -->
    <!-- :customRow="clickRow" -->
    <super-table
      :pageSize="50"
      :pagination=pagination
      ref="ref_details_table_consultation"
      style="margin-top: 5px;"
      :scroll="{x:1100}"
      ls_props_columns="detailsConsultation"
      :columns="consultationColumns"
      :data="ConsultationTable"
      :rowKey="(record,index)=> index"   
      :rowClassName="setRowClassName"
      
    >
      <!--序号-->
      <template slot="index" slot-scope="text,record,index">
        <span>{{index+1}}</span>
      </template>
      <template slot="source_type" slot-scope="text">
        <span style="color: #FC9C17" v-if="text==1"><a-badge color="#FC9C17" />电网</span>
        <span style="color: #5AC4C2" v-if="text==2"><a-badge color="#5AC4C2" />现场</span>
      </template>
      <!--操作-->
      <template  slot="consultationOperation" slot-scope="text,record">
        <div class="g-flex g-y-center">
          <!-- <a-button type="link" style="padding: 0" @click.stop="clickEditNetForm(record)" >编辑</a-button> -->
          <a-button v-if="record.consultItems.length > 0" type="link" style="padding: 0;margin-left: 10px;" @click.stop="openDrawer(record)" >详情</a-button>
        </div>

      </template>
    </super-table>
    <!--新增咨询情况--弹窗-->
    <add-net-form @reLoadDerailsNet="reLoadDerailsNet"  ref="addNetForm"/>
    <!--编辑咨询情况--弹窗-->
    <!-- <edit-net-form @reLoadDerailsNet="reLoadDerailsNet"  ref="editNetForm"/> -->
    <!--项目抽屉--弹窗-->
    <item-drawer ref="itemDrawer" />
  </div>

</template>

<script>
import { getConsultationByCustomerId } from '@/api/customer/customer'
import {SuperTable} from '@/components'
import addNetForm from './addNetForm'
import editNetForm from './editNetForm'
import itemDrawer from '@/views/customer/customerDetails/components/TabConsultation/itemDrawer'
export default {
  name: 'Tab',
  components: {
    SuperTable,
    itemDrawer,
    addNetForm,
    editNetForm,
  },
  props:{
    customerId:{
      type:String,
      default:''
    },
    customerDetailsForm:{
      type:Object,
      default:()=>{}
    }
  },
  data(){
    return{
      //咨询情况
      ConsultationTable :parameter => {
        return getConsultationByCustomerId(this.customerId).then(res => {
          console.log('咨询情况',res)
          this.getFilterOp(Object.keys(this.groupBy(res.rows,'itemName')),"itemName",res.rows) 
          this.getFilterOp(Object.keys(this.groupBy(res.rows,'source_type')),"source_type",res.rows) 
          this.getFilterOp(Object.keys(this.groupBy(res.rows,'department')),"department",res.rows) 
          return this.filterOp(parameter,res)
        })
      },
      selectedRowKeys:[],
      expandedRowKeys:[],//展开的行
      //咨询情况表列结构
      consultationColumns: [
        { title: '序号',scopedSlots: { customRender: 'index' },fixed:'left', width:60},
        { title: '咨询项目', dataIndex: 'itemName', key:'itemName',scopedSlots: { customRender: 'itemName' }, width:120, ellipsis: true,id:"itemName"},
        { title: '咨询类型', dataIndex: 'source_type',key:'source_type', width:120,scopedSlots: { customRender: 'source_type' },id:"source_type"},
        { title: '登记科室',dataIndex: 'department', key: 'department', width:120,id:"department"},
        { title: '咨询时间',dataIndex: 'consultDate', key: 'consultDate', width:150,sorter: (a, b) =>  new Date().getTime(a.consultDate)  - new Date( b.consultDate).getTime(), },
        { title: '具体报价',dataIndex: 'totalPrice', key: 'totalPrice', width:90,},
        { title: '来院意向', dataIndex: 'clientIntention',key:'clientIntention', width:100, },
        { title: '咨询状态', dataIndex: 'times', key:'times',width:100, },
        { title: '预约时间', dataIndex: 'orderDate',key:'orderDate', width:100, },
        { title: '咨询师', dataIndex: 'consultMan', key:'consultMan',width:100, },
        { title: '咨询内容', dataIndex: 'consultCondition',key:'consultCondition', width:150, ellipsis: true, },
        { title: '方案设计', dataIndex: 'conceptual_design',key:'conceptual_design', width:150, ellipsis: true, },
        { title: '区域来源', dataIndex: 'area',key:'area', width:130, },
        { title: '信息来源', dataIndex: 'infoSource',key:'infoSource', width:100, },
        { title: '搜索关键词', dataIndex: 'keyWord', key:'keyWord',width:100, },
        { title: '咨询工具', dataIndex: 'consultTool',key:'consultTool', width:100, },       
        { title: '来源网站', dataIndex: 'sourceWebsite',key:'sourceWebsite', width:150,ellipsis: true, },
        { title: '来源地址', dataIndex: 'keyWebsite', key:'keyWebsite',width:150,ellipsis: true, },
        { title: '开发员', dataIndex: 'developer', key:'developer',width:100, },
        { title: '操作', scopedSlots: { customRender: 'consultationOperation' },fixed:'right',width:100},
      ],
      pagination: {
        pageSizeOptions: ['50', '100', '150','200'], //这里注意只能是字符串，不能是数字
      },
    }
  },
  computed:{
    //新增电网按钮查看权限
    netBthPermission(){
      const admintype = this.$store.state.user.admintype
      if(admintype===1){
        return true
      }
      if(this.hasPerm('customer:netConsultation:list')){
        return true
      }
      return false
    },
  },
  activated() {
    if(this.$store.state.app.multiTab){
      // console.log('这里是激活缓存',this.$store.state.app)
      this.$nextTick(()=>{
        this.$refs.ref_details_table_consultation && this.$refs.ref_details_table_consultation.refresh()
      })
    }
  },
  
  watch:{  
     $route(){   
      if(this.$route.query.id && this.$route.query.card_no){
         this.customerId = this.$route.query.id
         this.card_no = this.$route.query.card_no
         this.$refs.ref_details_table_consultation && this.$refs.ref_details_table_consultation.refresh()
      }  
    },
  },

  methods:{
     /**
     * data 数据分组的 key 集合
     * res 全部数据
     */
    filterOp(data,res,callback){
        let result={}
        result.code= 200,
        result.msg= "查询成功"
        result.rows=[]
        let tempArr=[]
        let list = JSON.parse(JSON.stringify(res.rows))
        let num =0 //满足的条件个数
        // 回访类型
        if(data.hasOwnProperty('itemName') && data.itemName.length>0){    
          num=num + data.itemName.length
          data.itemName.forEach(i=>{
            let tempList= list.filter(item=>{
                return item.itemName == i
              })    
              tempArr= tempArr.concat(tempList)
          })
          result.rows=tempArr
          list= tempArr
          result.total = result.rows.length
        }
       
        if(data.hasOwnProperty('source_type') && data.source_type.length>0){ 
          let tempArr =[]   
          num=num + data.source_type.length
          data.source_type.forEach(i=>{
            let tempList= list.filter(item=>{
                return item.source_type == i
              })    
              tempArr= tempArr.concat(tempList)
          })
          result.rows=tempArr
          list= tempArr
          result.total = result.rows.length
        }

         if(data.hasOwnProperty('department') && data.department.length>0){ 
          let tempArr =[]   
          num=num + data.department.length
          data.department.forEach(i=>{
            let tempList= list.filter(item=>{
                return item.department == i
              })    
              tempArr= tempArr.concat(tempList)
          })
          result.rows=tempArr
          list= tempArr
          result.total = result.rows.length
        }

        
      
        if(num == 0 ){
          return res
        }else{
          return result
        }
       
    },

    /**
     * keys 数据分组的 key 集合
     * key  当前需要分组 的字段 
     * list  全部数据
     * 
     * 分组 得到的 数据格式
     * {
     *    a:[]
     *    b:[]
     * }
     */
    getFilterOp(keys,key,list){
        let arr =[]
        keys.forEach(item=>{
          let obj={}
          if(key == 'source_type'){
              obj.text=item == 1 ? '电网' :'现场'
              obj.value=item || ""
          }else{
              obj.text=item || ''
              obj.value=item || ''
          }                
          arr.push(obj)
        })  
        this.consultationColumns.filter(items=>{
          return items.id == key
        })[0].filters=arr
    },
    groupBy(data,key){
        let groups={};
        data.forEach(c=>{
            let value=c[key];
            if(value){
                groups[value]=groups[value]||[];
                groups[value].push(c);
            }         
        });
        return groups;
    },
    setRowClassName (record,index) {
      //  console.log('index',index)
       if(record.source_type == 1){
           return  'dwColor' 
       }
        if(record.source_type == 2){
           return  'xcColor' 
       }
     
    },
    clickRow(record,index){
      return {
        on: {
          click:(e)=>{
            this.rowIndex =index
            this.$refs.ref_details_table_consultation.refresh()
            //  e.path[1].style.backgroundColor="red"
          }
        }
      }
    },
    //刷新咨询情况
    reLoadDerailsNet(){
      this.$refs.ref_details_table_consultation.refresh()
    },
    openDrawer(record){
      this.$refs.itemDrawer.show(record)
    },
    // 打开咨询情况详情
    openConsultationDetails(record){
      console.log('点击详情',record)
    },
    addConsultation(){
      // console.log('this.customerDetailsForm',this.customerDetailsForm)
      this.$refs.addNetForm.add(this.customerDetailsForm)
    },
    //点击展开行
    expandedRowsChange(expandedRows){
      // console.log('当前展开行',expandedRows)
      this.expandedRowKeys = expandedRows
    },
    /**
     编辑咨询情况
     * **/
    clickEditNetForm(record){
      this.$refs.editNetForm.add(record)
    },
    expandIcon (props) {
      if (props.record.consultItems.length > 0) {
        if (props.expanded) {//有数据-展开时候图标
          return (
            <a style="color: 'black',margin-right:0px" onClick={(e) => {props.onExpand(props.record, e)}}>
              <a-icon type="minus-square" />
            </a>
          )
        } else {//有数据-未展开时候图标
          return (
            <a style="color: 'black' ,margin-right:0px" onClick={(e) => {props.onExpand(props.record, e)}}>
              <a-icon type="plus-square" />
            </a>
          )
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>

  
  // 选中高亮
/deep/ .dwColor,
/deep/ .dwColor:hover,
/deep/ .dwColor>td:hover,
/deep/ .dwColor>td{
  background-color: rgb(246, 255, 237) !important;
 
}

/deep/ .xcColor,
/deep/ .xcColor:hover,
/deep/ .xcColor>td:hover,
/deep/ .xcColor>td{
  background-color: rgb(230, 247, 255) !important;
 
}

</style>